<template>
    <div class="home">
        <el-row type="flex" justify="center">
            <el-col :span="19">
                <banner :banners="banners"></banner>
                <channel @change="change"></channel>
                <loading v-show="isLoading"></loading>
                <news-list :news="news" v-show="!isLoading"></news-list>
                <pagination :total="total" :page="page" :limit="limit" @sizeChange="getSize"
                            @pageChange="getPage"></pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Banner from "../components/Banner";
    import Channel from "../components/Channel";
    import NewsList from "../components/NewsList";
    import {getNewsList} from "../services/newsServices";
    import Pagination from "../components/Pagination";
    import Loading from '../components/Loading'

    export default {
        name: "Home",
        components: {
            Banner,
            Channel,
            Loading,
            NewsList,
            Pagination
        },
        data() {
            return {
                banners: [
                    {
                        "path": require("../assets/images/b1.jpg")
                    },
                    {
                        "path": require("../assets/images/b2.jpg")
                    }
                ],
                channelId: null,
                news: [],
                total: 0,
                page: 1,
                limit: 2,
                isLoading: true
            }
        },
        // 数据初始化
        created() {
            // this.change();
            this.getNews();
        },
        watch: {
            async channelId() {
                this.page = 1;
                this.getNews();
            }
        },
        methods: {
            change(channelId) {
                this.channelId = channelId
                this.getNews()
            },
            // 获取数据
            async getNews() {
                this.isLoading = true;
                this.news = [];
                let resp = await getNewsList(this.channelId, this.page, this.limit);
                this.news = resp.data.data;
                this.total = resp.data.total;
                this.isLoading = false;
            },
            // 获取每页的记录条数
            getSize(limit) {
                this.limit = limit;
                this.getNews()
            },
            // 获取当前页
            getPage(page) {
                this.page = page;
                this.getNews()
            }
        }
    }
</script>

<style scoped>

</style>
